import ApiPageList from "@/api/ApiV1WxMessagePageList_post"; // TAV
import { InputSearch } from "@/component/InputSearch";
import { Toast } from "@/hooks/Providers";
import { useLocalForageItem } from "@/hooks/useLocalForage";
import { useOpenEditor } from "@/hooks/Workspaces/useOpenEditor";
import { IMessage, msg_adapter2, session_adapter3 } from "@/mgr";
import { Paths } from "@/paths";
import { usePaging } from "@/utils/usePaging";
import { FlexHeader, FlexRoot, ListEmpty } from "@/views/_BaseView/FlexRoot";
import { List } from "@/views/_BaseView/List";
import { Flex, InputRef, Typography } from "antd";
import dayjs from "dayjs";
import { useRef } from "react";
import { MessageItem } from "./MessageItem";

export interface IRespItem extends ApiPageList.RespData { }
export interface IReqBody extends ApiPageList.BodyParams { }
export interface IUIItem extends IMessage { }

export default function MessageManagement() {
  const [toast] = Toast.use()
  const [filters, set_filters, filters_ready] = useLocalForageItem<IReqBody>({
    key: `${MessageManagement.name}#filters`
  });

  const { paging, list } = usePaging<IUIItem, IReqBody>({
    forage_key: `${MessageManagement.name}#list`,
    ready: filters_ready,
    catcher: e => { toast.error(e) },
    loader: async (p) => {
      const body: IReqBody = {
        ...p.params,
        pageNo: p.page,
        pageSize: p.page_size,
      }
      const r = await ApiPageList.call(body);
      const raws: IRespItem[] = (r as any).data ?? []
      const total = (r as any).totalCount ?? raws.length ?? 0
      p.set_total(total)
      return raws.map(v => msg_adapter2(v));
    }
  })

  const open_editor = useOpenEditor();
  const render_item = (item: IUIItem) => {
    const on_click = (e: React.MouseEvent) => {
      const title = `${item.raw?.account} <=> ${item.raw?.talkerName}`
      const uid = `r_${item.raw?.account}_${item.raw?.talker}`
      const session = session_adapter3(item, dayjs())
      open_editor({ uid, kind: Paths.All.RemoteChat, title, data: session })
      e.stopPropagation();
      e.preventDefault();
    }
    return (
      <MessageItem
        searching_value={filters?.searchName}
        item={item}
        show_account
        onClick={on_click} />
    )
  }
  const load_more = () => paging.load()

  const refresh = () => paging.load(true, () => filters)

  const ref_input_search = useRef<InputRef>(null)
  return (
    <FlexRoot vertical>
      <FlexHeader vertical align='stretch'>
        <InputSearch
          value={filters?.searchName ?? ''}
          onChange={e => set_filters(o => ({ ...o, searchName: e.target.value }))}
          _ref={ref_input_search}
          loading={paging.loading}
          style={{ flex: 1, paddingLeft: 0, paddingRight: 0 }}
          placeholder="账号/群名/发送人"
          allowClear
          onSearch={refresh} />
        <Flex align='center' justify='space-between'>
          <Typography.Text type='secondary'>总计{paging.total}条消息</Typography.Text>
        </Flex>
      </FlexHeader>
      <List
        virtual={Number(list?.length) > 100}
        data={list || []}
        itemHeight={71}
        itemKey={i => `${i.raw?.account}_${i.raw?.talker}_${i.raw?.seq}`}
        on_reach_end={load_more}
        others={<ListEmpty show={!paging.total && !paging.loading} description='' />}>
        {render_item}
      </List>
    </FlexRoot>
  )
}